<script setup>
import { Search, Edit, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
const order = ref([]);

//分页条数据模型
const page = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(5); //每页条数

//声明一个异步函数
import { orderListService } from "@/api/order.js";
const orderList = async () => {
  try {
    let params = {
      page: page.value,
      pageSize: pageSize.value,
    };
    let result = await orderListService(params);
    //渲染视图
    total.value = result.data.total;
    order.value = result.data.rows;
  } catch (error) {
    console.error("Error data: ", error);
  }
};
orderList();

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  orderList();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  page.value = num;
  orderList();
};

function statusFormatter(row, column, value, index) {
  return value == 1 ? '已付款' : '未付款';
}
function payFormatter(row, column, value, index) {
  return value == 1 ? '支付宝支付' : '微信支付';
}
function padFormatter(row, column, value, index) {
  return value == 1 ? '是' : '否';
}
function pickupStatusFormatter(row, column, value, index) {
  return value == 1 ? '已完成' : '未完成';
}
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <h1>订单列表</h1>
        <div class="extra">
          <el-button type="primary">添加订单</el-button>
        </div>
      </div>
    </template>
    <el-table :data="order" style="width: 100%">
      <el-table-column label="订单id" prop="orderId"></el-table-column>
      <el-table-column label="学生姓名" prop="sName"></el-table-column>
      <el-table-column label="家长姓名" prop="pName"></el-table-column>
      <el-table-column label="订单支付状态" prop="orderStatus" :formatter="statusFormatter"></el-table-column>
      <el-table-column label="支付金额(元)" prop="orderAmount"></el-table-column>
      <el-table-column label="支付渠道" prop="payChannel" :formatter="payFormatter"></el-table-column>
      <el-table-column label="是否陪送" prop="pad" :formatter="padFormatter"></el-table-column>
      <el-table-column label="下单时间" prop="ctime"></el-table-column>
      <el-table-column
        label="订单完成状态"
        prop="pickupStatus" :formatter="pickupStatusFormatter"
      ></el-table-column>
      <el-table-column label="操作" width="165">
        <template #default="{}">
          <el-button type="info" plain>编辑</el-button>
          <el-button type="danger" plain>删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>